:host {
  display: inline-block;
  width: 100%; }
  :host .days-box {
    padding: 0.5rem; }
  :host .days:nth-of-type(7n),
  :host .days:nth-of-type(7n + 1) {
    width: 15%; }
  :host .days {
    width: 14%;
    float: left;
    text-align: center;
    height: 36px;
    margin-bottom: 5px; }
  :host .days .marked p {
    font-weight: 500; }
  :host .days .on-selected {
    border: none; }
    :host .days .on-selected p {
      font-size: 1.3em; }
  :host button.days-btn {
    border-radius: 36px;
    width: 36px;
    display: block;
    margin: 0 auto;
    padding: 0;
    height: 36px;
    background-color: transparent;
    position: relative;
    z-index: 2;
    outline: 0; }
  :host button.days-btn p {
    margin: 0;
    font-size: 1.2em;
    color: #333;
    text-align: center; }
  :host button.days-btn[disabled] p {
    color: rgba(0, 0, 0, 0.25); }
  :host button.days-btn.on-selected small {
    transition: bottom 0.3s;
    bottom: -14px; }
  :host button.days-btn small {
    overflow: hidden;
    display: block;
    left: 0;
    right: 0;
    bottom: -5px;
    position: absolute;
    z-index: 1;
    text-align: center;
    font-weight: 200; }
  :host .primary button.days-btn small,
  :host .primary .days .marked p,
  :host .primary .days .today p {
    color: var(--ion-color-primary); }
  :host .primary .days .today p {
    font-weight: 700; }
  :host .primary .days .last-month-day p,
  :host .primary .days .next-month-day p {
    color: rgba(0, 0, 0, 0.25); }
  :host .primary .days .today.on-selected p,
  :host .primary .days .marked.on-selected p {
    color: #fff; }
  :host .primary .days .on-selected,
  :host .primary .startSelection button.days-btn,
  :host .primary .endSelection button.days-btn {
    background-color: var(--ion-color-primary);
    color: #fff; }
  :host .primary .startSelection {
    position: relative; }
    :host .primary .startSelection:before, :host .primary .startSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      display: block; }
    :host .primary .startSelection:before {
      background-color: var(--ion-color-primary); }
    :host .primary .startSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .primary .endSelection {
    position: relative; }
    :host .primary .endSelection:before, :host .primary .endSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block; }
    :host .primary .endSelection:before {
      background-color: var(--ion-color-primary); }
    :host .primary .endSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .primary .startSelection.endSelection:after {
    background-color: transparent; }
  :host .primary .startSelection button.days-btn {
    border-radius: 50%; }
  :host .primary .between button.days-btn {
    background-color: var(--ion-color-primary);
    width: 100%;
    border-radius: 0;
    position: relative; }
    :host .primary .between button.days-btn:after {
      height: 36px;
      width: 100%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      background-color: white;
      opacity: 0.25; }
    :host .primary .between button.days-btn p {
      color: #fff; }
  :host .primary .endSelection button.days-btn {
    border-radius: 50%; }
    :host .primary .endSelection button.days-btn p {
      color: #fff; }
  :host .primary .days.startSelection:nth-child(7n):before,
  :host .primary .days.between:nth-child(7n) button.days-btn,
  :host .primary button.days-btn.is-last {
    border-radius: 0 36px 36px 0; }
    :host .primary .days.startSelection:nth-child(7n):before.on-selected,
    :host .primary .days.between:nth-child(7n) button.days-btn.on-selected,
    :host .primary button.days-btn.is-last.on-selected {
      border-radius: 50%; }
  :host .primary .days.endSelection:nth-child(7n + 1):before,
  :host .primary .days.between:nth-child(7n + 1) button.days-btn,
  :host .primary .days.between.is-first-wrap button.days-btn.is-first,
  :host .primary button.days-btn.is-first {
    border-radius: 36px 0 0 36px; }
  :host .primary .startSelection button.days-btn.is-first,
  :host .primary .endSelection button.days-btn.is-first,
  :host .primary button.days-btn.is-first.on-selected,
  :host .primary button.days-btn.is-last.on-selected,
  :host .primary .startSelection button.days-btn.is-last,
  :host .primary .endSelection button.days-btn.is-last {
    border-radius: 50%; }
  :host .primary .startSelection.is-last-wrap::before, :host .primary .startSelection.is-last-wrap::after {
    border-radius: 0 36px 36px 0; }
  :host .primary .endSelection.is-first-wrap::before, :host .primary .endSelection.is-first-wrap::after {
    border-radius: 36px 0 0 36px; }
  :host .primary .days .on-selected p {
    color: #fff; }
  :host .primary .startSelection button.days-btn,
  :host .primary .endSelection button.days-btn,
  :host .primary .between button.days-btn {
    -webkit-transition-property: background-color;
    -moz-transition-property: background-color;
    -ms-transition-property: background-color;
    -o-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: 180ms;
    -moz-transition-duration: 180ms;
    -ms-transition-duration: 180ms;
    -o-transition-duration: 180ms;
    transition-duration: 180ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  :host .secondary button.days-btn small,
  :host .secondary .days .marked p,
  :host .secondary .days .today p {
    color: var(--ion-color-secondary); }
  :host .secondary .days .today p {
    font-weight: 700; }
  :host .secondary .days .last-month-day p,
  :host .secondary .days .next-month-day p {
    color: rgba(0, 0, 0, 0.25); }
  :host .secondary .days .today.on-selected p,
  :host .secondary .days .marked.on-selected p {
    color: #fff; }
  :host .secondary .days .on-selected,
  :host .secondary .startSelection button.days-btn,
  :host .secondary .endSelection button.days-btn {
    background-color: var(--ion-color-secondary);
    color: #fff; }
  :host .secondary .startSelection {
    position: relative; }
    :host .secondary .startSelection:before, :host .secondary .startSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      display: block; }
    :host .secondary .startSelection:before {
      background-color: var(--ion-color-secondary); }
    :host .secondary .startSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .secondary .endSelection {
    position: relative; }
    :host .secondary .endSelection:before, :host .secondary .endSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block; }
    :host .secondary .endSelection:before {
      background-color: var(--ion-color-secondary); }
    :host .secondary .endSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .secondary .startSelection.endSelection:after {
    background-color: transparent; }
  :host .secondary .startSelection button.days-btn {
    border-radius: 50%; }
  :host .secondary .between button.days-btn {
    background-color: var(--ion-color-secondary);
    width: 100%;
    border-radius: 0;
    position: relative; }
    :host .secondary .between button.days-btn:after {
      height: 36px;
      width: 100%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      background-color: white;
      opacity: 0.25; }
    :host .secondary .between button.days-btn p {
      color: #fff; }
  :host .secondary .endSelection button.days-btn {
    border-radius: 50%; }
    :host .secondary .endSelection button.days-btn p {
      color: #fff; }
  :host .secondary .days.startSelection:nth-child(7n):before,
  :host .secondary .days.between:nth-child(7n) button.days-btn,
  :host .secondary button.days-btn.is-last {
    border-radius: 0 36px 36px 0; }
    :host .secondary .days.startSelection:nth-child(7n):before.on-selected,
    :host .secondary .days.between:nth-child(7n) button.days-btn.on-selected,
    :host .secondary button.days-btn.is-last.on-selected {
      border-radius: 50%; }
  :host .secondary .days.endSelection:nth-child(7n + 1):before,
  :host .secondary .days.between:nth-child(7n + 1) button.days-btn,
  :host .secondary .days.between.is-first-wrap button.days-btn.is-first,
  :host .secondary button.days-btn.is-first {
    border-radius: 36px 0 0 36px; }
  :host .secondary .startSelection button.days-btn.is-first,
  :host .secondary .endSelection button.days-btn.is-first,
  :host .secondary button.days-btn.is-first.on-selected,
  :host .secondary button.days-btn.is-last.on-selected,
  :host .secondary .startSelection button.days-btn.is-last,
  :host .secondary .endSelection button.days-btn.is-last {
    border-radius: 50%; }
  :host .secondary .startSelection.is-last-wrap::before, :host .secondary .startSelection.is-last-wrap::after {
    border-radius: 0 36px 36px 0; }
  :host .secondary .endSelection.is-first-wrap::before, :host .secondary .endSelection.is-first-wrap::after {
    border-radius: 36px 0 0 36px; }
  :host .secondary .days .on-selected p {
    color: #fff; }
  :host .secondary .startSelection button.days-btn,
  :host .secondary .endSelection button.days-btn,
  :host .secondary .between button.days-btn {
    -webkit-transition-property: background-color;
    -moz-transition-property: background-color;
    -ms-transition-property: background-color;
    -o-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: 180ms;
    -moz-transition-duration: 180ms;
    -ms-transition-duration: 180ms;
    -o-transition-duration: 180ms;
    transition-duration: 180ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  :host .danger button.days-btn small,
  :host .danger .days .marked p,
  :host .danger .days .today p {
    color: var(--ion-color-danger); }
  :host .danger .days .today p {
    font-weight: 700; }
  :host .danger .days .last-month-day p,
  :host .danger .days .next-month-day p {
    color: rgba(0, 0, 0, 0.25); }
  :host .danger .days .today.on-selected p,
  :host .danger .days .marked.on-selected p {
    color: #fff; }
  :host .danger .days .on-selected,
  :host .danger .startSelection button.days-btn,
  :host .danger .endSelection button.days-btn {
    background-color: var(--ion-color-danger);
    color: #fff; }
  :host .danger .startSelection {
    position: relative; }
    :host .danger .startSelection:before, :host .danger .startSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      display: block; }
    :host .danger .startSelection:before {
      background-color: var(--ion-color-danger); }
    :host .danger .startSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .danger .endSelection {
    position: relative; }
    :host .danger .endSelection:before, :host .danger .endSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block; }
    :host .danger .endSelection:before {
      background-color: var(--ion-color-danger); }
    :host .danger .endSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .danger .startSelection.endSelection:after {
    background-color: transparent; }
  :host .danger .startSelection button.days-btn {
    border-radius: 50%; }
  :host .danger .between button.days-btn {
    background-color: var(--ion-color-danger);
    width: 100%;
    border-radius: 0;
    position: relative; }
    :host .danger .between button.days-btn:after {
      height: 36px;
      width: 100%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      background-color: white;
      opacity: 0.25; }
    :host .danger .between button.days-btn p {
      color: #fff; }
  :host .danger .endSelection button.days-btn {
    border-radius: 50%; }
    :host .danger .endSelection button.days-btn p {
      color: #fff; }
  :host .danger .days.startSelection:nth-child(7n):before,
  :host .danger .days.between:nth-child(7n) button.days-btn,
  :host .danger button.days-btn.is-last {
    border-radius: 0 36px 36px 0; }
    :host .danger .days.startSelection:nth-child(7n):before.on-selected,
    :host .danger .days.between:nth-child(7n) button.days-btn.on-selected,
    :host .danger button.days-btn.is-last.on-selected {
      border-radius: 50%; }
  :host .danger .days.endSelection:nth-child(7n + 1):before,
  :host .danger .days.between:nth-child(7n + 1) button.days-btn,
  :host .danger .days.between.is-first-wrap button.days-btn.is-first,
  :host .danger button.days-btn.is-first {
    border-radius: 36px 0 0 36px; }
  :host .danger .startSelection button.days-btn.is-first,
  :host .danger .endSelection button.days-btn.is-first,
  :host .danger button.days-btn.is-first.on-selected,
  :host .danger button.days-btn.is-last.on-selected,
  :host .danger .startSelection button.days-btn.is-last,
  :host .danger .endSelection button.days-btn.is-last {
    border-radius: 50%; }
  :host .danger .startSelection.is-last-wrap::before, :host .danger .startSelection.is-last-wrap::after {
    border-radius: 0 36px 36px 0; }
  :host .danger .endSelection.is-first-wrap::before, :host .danger .endSelection.is-first-wrap::after {
    border-radius: 36px 0 0 36px; }
  :host .danger .days .on-selected p {
    color: #fff; }
  :host .danger .startSelection button.days-btn,
  :host .danger .endSelection button.days-btn,
  :host .danger .between button.days-btn {
    -webkit-transition-property: background-color;
    -moz-transition-property: background-color;
    -ms-transition-property: background-color;
    -o-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: 180ms;
    -moz-transition-duration: 180ms;
    -ms-transition-duration: 180ms;
    -o-transition-duration: 180ms;
    transition-duration: 180ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  :host .dark button.days-btn small,
  :host .dark .days .marked p,
  :host .dark .days .today p {
    color: var(--ion-color-dark); }
  :host .dark .days .today p {
    font-weight: 700; }
  :host .dark .days .last-month-day p,
  :host .dark .days .next-month-day p {
    color: rgba(0, 0, 0, 0.25); }
  :host .dark .days .today.on-selected p,
  :host .dark .days .marked.on-selected p {
    color: #fff; }
  :host .dark .days .on-selected,
  :host .dark .startSelection button.days-btn,
  :host .dark .endSelection button.days-btn {
    background-color: var(--ion-color-dark);
    color: #fff; }
  :host .dark .startSelection {
    position: relative; }
    :host .dark .startSelection:before, :host .dark .startSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      display: block; }
    :host .dark .startSelection:before {
      background-color: var(--ion-color-dark); }
    :host .dark .startSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .dark .endSelection {
    position: relative; }
    :host .dark .endSelection:before, :host .dark .endSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block; }
    :host .dark .endSelection:before {
      background-color: var(--ion-color-dark); }
    :host .dark .endSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .dark .startSelection.endSelection:after {
    background-color: transparent; }
  :host .dark .startSelection button.days-btn {
    border-radius: 50%; }
  :host .dark .between button.days-btn {
    background-color: var(--ion-color-dark);
    width: 100%;
    border-radius: 0;
    position: relative; }
    :host .dark .between button.days-btn:after {
      height: 36px;
      width: 100%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      background-color: white;
      opacity: 0.25; }
    :host .dark .between button.days-btn p {
      color: #fff; }
  :host .dark .endSelection button.days-btn {
    border-radius: 50%; }
    :host .dark .endSelection button.days-btn p {
      color: #fff; }
  :host .dark .days.startSelection:nth-child(7n):before,
  :host .dark .days.between:nth-child(7n) button.days-btn,
  :host .dark button.days-btn.is-last {
    border-radius: 0 36px 36px 0; }
    :host .dark .days.startSelection:nth-child(7n):before.on-selected,
    :host .dark .days.between:nth-child(7n) button.days-btn.on-selected,
    :host .dark button.days-btn.is-last.on-selected {
      border-radius: 50%; }
  :host .dark .days.endSelection:nth-child(7n + 1):before,
  :host .dark .days.between:nth-child(7n + 1) button.days-btn,
  :host .dark .days.between.is-first-wrap button.days-btn.is-first,
  :host .dark button.days-btn.is-first {
    border-radius: 36px 0 0 36px; }
  :host .dark .startSelection button.days-btn.is-first,
  :host .dark .endSelection button.days-btn.is-first,
  :host .dark button.days-btn.is-first.on-selected,
  :host .dark button.days-btn.is-last.on-selected,
  :host .dark .startSelection button.days-btn.is-last,
  :host .dark .endSelection button.days-btn.is-last {
    border-radius: 50%; }
  :host .dark .startSelection.is-last-wrap::before, :host .dark .startSelection.is-last-wrap::after {
    border-radius: 0 36px 36px 0; }
  :host .dark .endSelection.is-first-wrap::before, :host .dark .endSelection.is-first-wrap::after {
    border-radius: 36px 0 0 36px; }
  :host .dark .days .on-selected p {
    color: #fff; }
  :host .dark .startSelection button.days-btn,
  :host .dark .endSelection button.days-btn,
  :host .dark .between button.days-btn {
    -webkit-transition-property: background-color;
    -moz-transition-property: background-color;
    -ms-transition-property: background-color;
    -o-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: 180ms;
    -moz-transition-duration: 180ms;
    -ms-transition-duration: 180ms;
    -o-transition-duration: 180ms;
    transition-duration: 180ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  :host .light button.days-btn small,
  :host .light .days .marked p,
  :host .light .days .today p {
    color: var(--ion-color-light); }
  :host .light .days .today p {
    font-weight: 700; }
  :host .light .days .last-month-day p,
  :host .light .days .next-month-day p {
    color: rgba(0, 0, 0, 0.25); }
  :host .light .days .today.on-selected p,
  :host .light .days .marked.on-selected p {
    color: #a0a0a0; }
  :host .light .days .on-selected,
  :host .light .startSelection button.days-btn,
  :host .light .endSelection button.days-btn {
    background-color: var(--ion-color-light);
    color: #a0a0a0; }
  :host .light .startSelection {
    position: relative; }
    :host .light .startSelection:before, :host .light .startSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      display: block; }
    :host .light .startSelection:before {
      background-color: var(--ion-color-light); }
    :host .light .startSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .light .endSelection {
    position: relative; }
    :host .light .endSelection:before, :host .light .endSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block; }
    :host .light .endSelection:before {
      background-color: var(--ion-color-light); }
    :host .light .endSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .light .startSelection.endSelection:after {
    background-color: transparent; }
  :host .light .startSelection button.days-btn {
    border-radius: 50%; }
  :host .light .between button.days-btn {
    background-color: var(--ion-color-light);
    width: 100%;
    border-radius: 0;
    position: relative; }
    :host .light .between button.days-btn:after {
      height: 36px;
      width: 100%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      background-color: white;
      opacity: 0.25; }
    :host .light .between button.days-btn p {
      color: #a0a0a0; }
  :host .light .endSelection button.days-btn {
    border-radius: 50%; }
    :host .light .endSelection button.days-btn p {
      color: #a0a0a0; }
  :host .light .days.startSelection:nth-child(7n):before,
  :host .light .days.between:nth-child(7n) button.days-btn,
  :host .light button.days-btn.is-last {
    border-radius: 0 36px 36px 0; }
    :host .light .days.startSelection:nth-child(7n):before.on-selected,
    :host .light .days.between:nth-child(7n) button.days-btn.on-selected,
    :host .light button.days-btn.is-last.on-selected {
      border-radius: 50%; }
  :host .light .days.endSelection:nth-child(7n + 1):before,
  :host .light .days.between:nth-child(7n + 1) button.days-btn,
  :host .light .days.between.is-first-wrap button.days-btn.is-first,
  :host .light button.days-btn.is-first {
    border-radius: 36px 0 0 36px; }
  :host .light .startSelection button.days-btn.is-first,
  :host .light .endSelection button.days-btn.is-first,
  :host .light button.days-btn.is-first.on-selected,
  :host .light button.days-btn.is-last.on-selected,
  :host .light .startSelection button.days-btn.is-last,
  :host .light .endSelection button.days-btn.is-last {
    border-radius: 50%; }
  :host .light .startSelection.is-last-wrap::before, :host .light .startSelection.is-last-wrap::after {
    border-radius: 0 36px 36px 0; }
  :host .light .endSelection.is-first-wrap::before, :host .light .endSelection.is-first-wrap::after {
    border-radius: 36px 0 0 36px; }
  :host .light .days .on-selected p {
    color: #a0a0a0; }
  :host .light .startSelection button.days-btn,
  :host .light .endSelection button.days-btn,
  :host .light .between button.days-btn {
    -webkit-transition-property: background-color;
    -moz-transition-property: background-color;
    -ms-transition-property: background-color;
    -o-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: 180ms;
    -moz-transition-duration: 180ms;
    -ms-transition-duration: 180ms;
    -o-transition-duration: 180ms;
    transition-duration: 180ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  :host .light .days .today p {
    color: #565656; }
  :host .cal-color .days .today p {
    font-weight: 700; }
  :host .cal-color .days .last-month-day p,
  :host .cal-color .days .next-month-day p {
    color: rgba(0, 0, 0, 0.25); }
  :host .cal-color .days .today.on-selected p,
  :host .cal-color .days .marked.on-selected p {
    color: #fff; }
  :host .cal-color .days .on-selected,
  :host .cal-color .startSelection button.days-btn,
  :host .cal-color .endSelection button.days-btn {
    color: #fff; }
  :host .cal-color .startSelection {
    position: relative; }
    :host .cal-color .startSelection:before, :host .cal-color .startSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      display: block; }
    :host .cal-color .startSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .cal-color .endSelection {
    position: relative; }
    :host .cal-color .endSelection:before, :host .cal-color .endSelection:after {
      height: 36px;
      width: 50%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block; }
    :host .cal-color .endSelection:after {
      background-color: white;
      opacity: 0.25; }
  :host .cal-color .startSelection.endSelection:after {
    background-color: transparent; }
  :host .cal-color .startSelection button.days-btn {
    border-radius: 50%; }
  :host .cal-color .between button.days-btn {
    width: 100%;
    border-radius: 0;
    position: relative; }
    :host .cal-color .between button.days-btn:after {
      height: 36px;
      width: 100%;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: block;
      background-color: white;
      opacity: 0.25; }
    :host .cal-color .between button.days-btn p {
      color: #fff; }
  :host .cal-color .endSelection button.days-btn {
    border-radius: 50%; }
    :host .cal-color .endSelection button.days-btn p {
      color: #fff; }
  :host .cal-color .days.startSelection:nth-child(7n):before,
  :host .cal-color .days.between:nth-child(7n) button.days-btn,
  :host .cal-color button.days-btn.is-last {
    border-radius: 0 36px 36px 0; }
    :host .cal-color .days.startSelection:nth-child(7n):before.on-selected,
    :host .cal-color .days.between:nth-child(7n) button.days-btn.on-selected,
    :host .cal-color button.days-btn.is-last.on-selected {
      border-radius: 50%; }
  :host .cal-color .days.endSelection:nth-child(7n + 1):before,
  :host .cal-color .days.between:nth-child(7n + 1) button.days-btn,
  :host .cal-color .days.between.is-first-wrap button.days-btn.is-first,
  :host .cal-color button.days-btn.is-first {
    border-radius: 36px 0 0 36px; }
  :host .cal-color .startSelection button.days-btn.is-first,
  :host .cal-color .endSelection button.days-btn.is-first,
  :host .cal-color button.days-btn.is-first.on-selected,
  :host .cal-color button.days-btn.is-last.on-selected,
  :host .cal-color .startSelection button.days-btn.is-last,
  :host .cal-color .endSelection button.days-btn.is-last {
    border-radius: 50%; }
  :host .cal-color .startSelection.is-last-wrap::before, :host .cal-color .startSelection.is-last-wrap::after {
    border-radius: 0 36px 36px 0; }
  :host .cal-color .endSelection.is-first-wrap::before, :host .cal-color .endSelection.is-first-wrap::after {
    border-radius: 36px 0 0 36px; }
  :host .cal-color .days .on-selected p {
    color: #fff; }
  :host .cal-color .startSelection button.days-btn,
  :host .cal-color .endSelection button.days-btn,
  :host .cal-color .between button.days-btn {
    -webkit-transition-property: background-color;
    -moz-transition-property: background-color;
    -ms-transition-property: background-color;
    -o-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: 180ms;
    -moz-transition-duration: 180ms;
    -ms-transition-duration: 180ms;
    -o-transition-duration: 180ms;
    transition-duration: 180ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }

:host .month-picker {
  margin: 20px 0;
  display: inline-block;
  width: 100%; }

:host .month-packer-item {
  width: 25%;
  box-sizing: border-box;
  float: left;
  height: 50px;
  padding: 5px; }
  :host .month-packer-item button {
    border-radius: 32px;
    width: 100%;
    height: 100%;
    font-size: 1em;
    background-color: transparent; }

:host .month-picker.primary .month-packer-item.this-month button {
  border: 1px solid var(--ion-color-primary); }

:host .month-picker.primary .month-packer-item.active button {
  background-color: var(--ion-color-primary);
  color: #fff; }

:host .month-picker.secondary .month-packer-item.this-month button {
  border: 1px solid var(--ion-color-secondary); }

:host .month-picker.secondary .month-packer-item.active button {
  background-color: var(--ion-color-secondary);
  color: #fff; }

:host .month-picker.danger .month-packer-item.this-month button {
  border: 1px solid var(--ion-color-danger); }

:host .month-picker.danger .month-packer-item.active button {
  background-color: var(--ion-color-danger);
  color: #fff; }

:host .month-picker.dark .month-packer-item.this-month button {
  border: 1px solid var(--ion-color-dark); }

:host .month-picker.dark .month-packer-item.active button {
  background-color: var(--ion-color-dark);
  color: #fff; }

:host .month-picker.light .month-packer-item.this-month button {
  border: 1px solid var(--ion-color-light); }

:host .month-picker.light .month-packer-item.active button {
  background-color: var(--ion-color-light);
  color: #9e9e9e; }

:host .month-picker.transparent {
  background-color: transparent; }
  :host .month-picker.transparent .month-packer-item.this-month button {
    border: 1px solid var(--ion-color-light); }
  :host .month-picker.transparent .month-packer-item.active button {
    background-color: var(--ion-color-light);
    color: #9e9e9e; }

:host .month-picker.cal-color .month-packer-item.this-month button {
  border: 1px solid; }

:host .month-picker.cal-color .month-packer-item.active button {
  color: #fff; }

:host .toolbar-background-md,
:host .toolbar-background-ios {
  background: transparent; }

:host .week-toolbar {
  --padding-start: 0;
  --padding-end: 0;
  --padding-bottom: 0;
  --padding-top: 0; }
  :host .week-toolbar.primary {
    --background: var(--ion-color-primary); }
  :host .week-toolbar.secondary {
    --background: var(--ion-color-secondary); }
  :host .week-toolbar.danger {
    --background: var(--ion-color-danger); }
  :host .week-toolbar.dark {
    --background: var(--ion-color-dark); }
  :host .week-toolbar.light {
    --background: var(--ion-color-light); }
  :host .week-toolbar.transparent {
    --background: transparent; }
  :host .week-toolbar.toolbar-md {
    min-height: 44px; }

:host .week-title {
  margin: 0;
  height: 44px;
  width: 100%;
  padding: 15px 0;
  color: #fff; }
  :host .week-title.light, :host .week-title.transparent {
    color: #9e9e9e; }
  :host .week-title li {
    list-style-type: none;
    display: block;
    float: left;
    width: 14%;
    text-align: center; }
  :host .week-title li:nth-of-type(7n),
  :host .week-title li:nth-of-type(7n + 1) {
    width: 15%; }

:host ion-select {
  max-width: unset; }
  :host ion-select .select-icon > .select-icon-inner,
  :host ion-select .select-text {
    color: #fff !important; }
  :host ion-select.select-ios {
    max-width: unset; }

:host .calendar-page {
  background-color: #fbfbfb; }

:host .month-box {
  display: inline-block;
  width: 100%;
  padding-bottom: 1em;
  border-bottom: 1px solid #f1f1f1; }

:host h4 {
  font-weight: 400;
  font-size: 1.8rem;
  display: block;
  text-align: center;
  margin: 1rem 0 0;
  color: #929292; }

:host {
  padding: 10px 20px;
  box-sizing: border-box;
  display: inline-block;
  background-color: #fff;
  width: 100%; }
  :host .title {
    padding: 0 40px 0 40px;
    overflow: hidden; }
    :host .title .back,
    :host .title .forward,
    :host .title .switch-btn {
      display: block;
      position: relative;
      float: left;
      min-height: 32px;
      margin: 0;
      padding: 0;
      font-size: 15px; }
    :host .title .back,
    :host .title .forward {
      color: #757575; }
    :host .title .back {
      margin-left: -100%;
      left: -40px;
      width: 40px; }
    :host .title .forward {
      margin-left: -40px;
      right: -40px;
      width: 40px; }
    :host .title .switch-btn {
      --margin-top: 0;
      --margin-bottom: 0;
      --margin-start: auto;
      --margin-end: auto;
      width: 100%;
      text-align: center;
      line-height: 32px;
      color: #757575; }
      :host .title .switch-btn .arrow-dropdown {
        margin-left: 5px; }
  :host .days.between .days-btn.is-last,
  :host .days.between .days-btn.is-first {
    border-radius: 0; }
  :host .component-mode .days.startSelection.is-last-wrap::after {
    border-radius: 0; }
  :host .component-mode .days.endSelection.is-first-wrap::after {
    border-radius: 0; }
